<script setup>
import axios from 'axios'
import {ref, onMounted} from 'vue'
import * as echarts from 'echarts';
import $ from 'jquery';
import china from '@/assests/map/china'
import { useQueryStore,useUserStore } from '@/stores'
const userStore = useUserStore()

const charts1 = ref(null)
const charts_right1 = ref(null)
const charts_right2 = ref(null)
const charts_left1 = ref(null)
const charts_left2 = ref(null)

const jobList = ref([])

const degreesNumber = ref([])

const avgSalaryIndustry = ref([])
const avgSalaryValue = ref([])

const jobNumberDate = ref([])
const jobNumber = ref([])
const jobNumberUp = ref([])
const jobNumberDown = ref([])

const industryName = ref([])
const jobHot = ref([])

const show_CountryJob = () => {
    const myCharts = echarts.init(charts1.value)
    myCharts.showLoading();
    echarts.registerMap('China', china);
    myCharts.setOption({
        title: {
            text: '全国招聘岗位分布图',
            left: 'center', // 水平居中  
            top: '20',
            textStyle: {  
                color: 'white',    // 字体颜色为白色  
                fontSize: 25       // 字体大小为20，你可以根据需要调整这个值  
            } 
        },
        tooltip: { formatter : '{b} 招聘岗位 {c}'},
        visualMap: {
            left: 'left',
            top: 'center',
            min: 0,
            max: 40000,
            text: ['高', '低'],
            calculable: true,
            inRange: {
                color: [
                    '#cceeff',
                    '#77ddff',
                    '#33CCFF',
                    '#00bbff',
                    '#0066ff',
                    '#0000ff',
                    'blue'
                ]
            }
        },
        series: [
            {
                type: 'map',
                map: 'China',
                roam: true,
                scaleLimit: {
                    min: 0.7,
                    max: 3,
                },
                data: jobList.value,
            },
        ],
    });
    myCharts.hideLoading();
}

const show_degrees = () => {
    const option3 = {
    title: {
      text: '所有岗位各学历占比',
      left: 'center',
      textStyle: {
          color: 'white',
          fontSize: '20'
      }
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left',
      textStyle: {
          color: 'white'
      }
    },
    series: [
      {
        name: '学历：数量',
        type: 'pie',
        radius: '50%',
        top: '40',
        data: degreesNumber.value,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          }
        },
        label: {
          fontSize: 13,
          color: 'white',
          },
        }
      ]
    };
    const degrees = echarts.init(charts_right1.value)
    degrees.setOption(option3)
}

const show_avgSalary = () => {
    const option2 = {
    title: {
      text: '前七行业平均薪资',
      left: 'center',
      textStyle: {
          color: 'white',
          fontSize: '20'
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: avgSalaryIndustry.value,
        axisTick: {
          alignWithLabel: true
        },
        axisLabel: {  
          textStyle: {  
            color: 'white'
          }  
        } 
      }
    ],
    yAxis: [
      {
        type: 'value',
        axisLabel: {  
          textStyle: {  
            color: 'white' 
          }  
        }
      }
      
    ],
    series: [
      {
        name: '平均薪资',
        type: 'bar',
        barWidth: '60%',
        data: avgSalaryValue.value,
        itemStyle: {  
          color: 'aquamarine' // 设置数据条的颜色  
          },
        }
      ]
    };
    const salary = echarts.init(charts_right2.value)
    salary.setOption(option2)
}

const show_jobNUmber = () => {
    const option4 = {
    title: {
      text: '招聘岗位数量变化',
      left: 'center',
      textStyle: {
          color: 'white',
          fontSize: '20'
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
      formatter: function (params) {
        let tar;
        let number;
        if (params[1] && params[1].value !== '-') {
          tar = params[1];
        } else {
          tar = params[2];
        }
        number = params[0];
        return tar && tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value + '<br/>'+ '总数：'+ Math.floor(number.value / 100) + '00+';
      }
    },
    legend: {
      data: ['下降', '上升']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      axisLabel: {  
          textStyle: {  
            color: 'white' 
          }  
        },
      data: jobNumberDate.value
    },
    yAxis: {
      type: 'value',
      axisLabel: {  
          textStyle: {  
            color: 'white' 
          }  
        }
    },
    series: [
      {
        name: 'Placeholder',
        type: 'bar',
        stack: 'Total',
        silent: true,
        itemStyle: {
          borderColor: 'transparent',
          color: 'transparent'
        },
        
        emphasis: {
          itemStyle: {
            borderColor: 'transparent',
            color: 'transparent'
          }
        },//总数
        data: jobNumber.value,
        label: {
          fontSize: 13,
          color: 'white',
        },
      },
      {
        name: '上升',
        type: 'bar',
        stack: 'Total',
        label: {
          show: true,
          position: 'top',
          fontSize: 13,
          color: 'white',
        },//升                         相当于负号 -
        data: jobNumberUp.value
      },
      {
        name: '下降',
        type: 'bar',
        stack: 'Total',
        label: {
          show: true,
          position: 'bottom',
          fontSize: '13',
          color: 'white'
        },
          //  降
        data: jobNumberDown.value
        }
      ]
    };
    const jobnumber = echarts.init(charts_left2.value)
    jobnumber.setOption(option4)
}

const show_industryHot = () => {
    const option1 = {
    title: {
      text: '前十大热门行业排行',
      left: 'center',
      textStyle: {  
            color: 'white' 
          }
    },
    tooltip: {
      axisPointer: {
        type: 'shadow',
      }
    },
    xAxis: {
      max: 'dataMax',
      axisLabel: {  
          textStyle: {  
            color: 'white' 
          },
          
        }
    },
    yAxis: {
      type: 'category',
      axisLabel: {  
          textStyle: {  
            color: 'white', 
          },
        },
      data: industryName.value,
      inverse: true,
    },
    series: [
      {
        realtimeSort: true,
        name: '行业热度值',
        type: 'bar',
        data: jobHot.value,
        label: {
          show: true,
          position: 'right',
          valueAnimation: true,
          fontSize: 13,
          color: 'white',
          },
        }
      ],
    };
    const industryHot = echarts.init(charts_left1.value)
    industryHot.setOption(option1)
}

//axios
const getJobList = () => {
  //axios.post是一个异步方法，会新开一个线程，在等响应的过程中后面的代码会继续执行
  axios.post('http://localhost:8000/user/analysis/country',{},{
    headers:{
            authentication: userStore.token,
        }
  }).then(resp => {
    if(resp.data.code === 1){
      jobList.value = resp.data.data;
      show_CountryJob()
    }
  })
}
//axios
const getDegreesNumber = () => {
  axios.post('http://localhost:8000/user/analysis/degrees',{},{
    headers:{
            authentication: userStore.token,
        }
  }).then(resp => {
    if(resp.data.code === 1){
      degreesNumber.value = resp.data.data;
      show_degrees()
    }
  })
}
//axios
const getAvhSalary = () => {
  axios.post('http://localhost:8000/user/analysis/avgsalary',{},{
    headers:{
            authentication: userStore.token,
        }
  }).then(resp => {
    if(resp.data.code === 1){
      avgSalaryIndustry.value = process_array(resp.data.data.name)
      avgSalaryValue.value = process_array(resp.data.data.value)
      show_avgSalary()
    }
  })
}
//axios
const getJobNumber = () => {
  axios.post('http://localhost:8000/user/analysis/jobnumber',{},{
    headers:{
            authentication: userStore.token,
        }
  }).then(resp => {
    if(resp.data.code === 1){
      console.log(resp.data.data)
      jobNumberDate.value = process_array(resp.data.data.date)
      jobNumber.value = process_array(resp.data.data.name);
      jobNumberUp.value = process_array(resp.data.data.value);
      jobNumberDown.value = process_array(resp.data.data.pvalue);
      show_jobNUmber()
    }
  })
}
//axios
const getIndustryHot = () => {
  axios.post('http://localhost:8000/user/analysis/hot',{},{
    headers:{
            authentication: userStore.token,
        }
  }).then(resp => {
    if(resp.data.code === 1){
      console.log(resp.data.data)
      industryName.value = process_array(resp.data.data.name)
      jobHot.value = process_array(resp.data.data.value)
      show_industryHot()
    }
  })
}



onMounted(() => {
    getJobList()
    getDegreesNumber()
    getAvhSalary()
    getJobNumber()
    getIndustryHot()
})
//将字符串转化为数组
const process_array = (x) => {
  return x.split(',');
}


</script>
<template>
    <div class="back">
    <div style="float: left; padding: 10px;">
        <div class="four" ref="charts_left1" ></div>
        <div class="four" ref="charts_left2" ></div>
    </div>
    <div ref="charts1" id="myChartContainer" class="chart" style=" width: 740px; height:845px; float: left;"></div>
    <div style="display: inline-block;padding: 10px;">
        <div class="four" ref="charts_right1" ></div>
        <div class="four" ref="charts_right2" ></div>
    </div>
    </div>
    
</template>

<style scoped>
.back{
    height: 845px;
    background-image: url('/src/assests/background-data.jpg');
    background-repeat: no-repeat;
    background-size: cover;

}
.four{
    width: 420px;
    height: 390px;
    background-color: rgba(0, 0, 0, 0.2); /* 黑色，50%透明度 */
    border-radius: 20px;
    margin: 10px 0px;
}
</style>